<template>
    <div class="complete">
        <vue-header title="邀请" :left-options="{backText: ''}">

        </vue-header>
        <div class="complete-content">
            <div class="complete-content-view">
                <div class="complete-content-view-flex complete-content-view-title">
                    <div class="complete-content-view-flex-title-left complete-content-view-title-left"><font color="#F30901">长按</font>发送给朋友或朋友圈</div>
                    <div class="complete-content-view-flex-title-right complete-content-view-title-right"><img src="../../assets/images/home.png" /></div>
                </div>
                <div class="complete-content-view-secode">
                    <div class="complete-content-view-header">
                        <img src="../../assets/images/test1.png" />
                    </div>
                    <div class="complete-content-view-userName">
                        <font color="#F30901">我是</font>李子琪
                    </div>
                    <div class="complete-content-view-line">
                        <img src="../../assets/images/com_line.png" />
                    </div>
                </div>
                <div class="complete-content-view-flex complete-content-view-center">
                    <div class="complete-content-view-center-flex-left">
                        <div class="complete-content-view-center-text">山东省东阿阿胶膏滋补 养颜糕固本阿胶膏</div>
                        <div class="complete-content-view-center-price">￥999.88</div>
                    </div>
                    <div class="complete-content-view-center-flex-right">
                        <img src="../../assets/images/test1.png" />
                    </div>

                </div>
                <div class="complete-content-view-center-bottom">
                    我在果子姐姐的店铺买了该商品，品质优良。邀您 一起来购，买优质的农特产！
                </div>
                <div class="complete-content-view-footer ">
                    <div class="complete-content-view-flex">
                        <div class="complete-content-view-flex-footer-left">
                            <qrcode :value="qr" :size="70"></qrcode>
                        </div>
                        <div class="complete-content-view-flex-footer-right">
                            <img src="../../assets/images/finger_icon.png" />
                        </div>
                    </div>
                    <div class="complete-content-view-footer-bottom">
                        长按识别扫码进入商品详情
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import vueHeader from "@/components/vue-header/index";
import { Qrcode } from "vux";
export default {
  components: {
    vueHeader,
    Qrcode
  },
  data() {
    return {
      qr: "hahahhdsjdjwd"
    };
  }
};
</script>
<style lang="scss" scoped>
.complete {
  height: 100%;
  .complete-content {
    height: calc(100vh - 46px);
    overflow: auto;
    background-image: url(./../../assets/images/com_bg.png);
    background-size: 100% 100%;
    .complete-content-view-flex {
      display: flex;
      .complete-content-view-flex-title-left {
        flex: 1;
      }
      .complete-content-view-flex-title-right {
      }
      .complete-content-view-title-left {
        font-size: 0.4267rem;
        color: #333333;
      }
      .complete-content-view-title-right {
        img {
          height: 0.64rem;
          width: 0.64rem;
        }
      }
      .complete-content-view-flex-center-left {
        flex: 1;
      }
      .complete-content-view-flex-center-right {
      }
      .complete-content-view-flex-footer-left {
        flex: 1;
      }
      .complete-content-view-flex-footer-right {
        flex: 1;
        img {
          height: 70px;
          width: 70px;
        }
      }
    }
    .complete-content-view-title {
      text-align: center;
      padding: 0 0.4267rem;
      margin-top: 0.5067rem;
    }
    .complete-content-view-secode {
        margin-top:0.72rem;
      .complete-content-view-header {
        text-align: center;
        img {
          height: 1.6rem;
          width: 1.6rem;
          border-radius: 50%;
        }
      }
      .complete-content-view-userName {
        font-size: 0.4rem;
        color: rgba(51, 51, 51, 1);
        text-align: center;
        margin-top: 0.24rem;
      }
      .complete-content-view-line {
          margin: 0.9067rem 1.0133rem 0;
        img {
          height: 0.08rem;
          width: 100%;
        }
      }
    }
    .complete-content-view-center {
        margin: 1.08rem 1.0667rem 0 1.0667rem;
      .complete-content-view-center-flex-left {
        flex: 1;
        margin-right: 0.58rem;
        .complete-content-view-center-text {
          font-size: 0.4rem;
          color: rgba(51, 51, 51, 1);
        }
        .complete-content-view-center-price {
          font-size: 0.48rem;
          color: rgba(243, 9, 1, 1);
          margin-top: 0.8533rem;
        }
      }
      .complete-content-view-center-flex-right {
        img {
          width: 3.2rem;
          height: 3.04rem;
        }
      }
    }
    .complete-content-view-center-bottom {
      font-size: 0.3733rem;
      color: rgba(51, 51, 51, 1);
      margin: 0.8667rem 0.96rem 0;
    }
    .complete-content-view-footer{
        text-align: center;
        margin: 0.8933rem 80px 0;
    }
    .complete-content-view-footer-bottom {
      font-size: 0.3733rem;
      color: rgba(51, 51, 51, 1);
      margin-top: 0.52rem
    }
  }
}
</style>
